<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueComponent的理解</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--

    关于VueComponent:
        1.Car组件本质是一个名为关于VueComponent的构造函数，且不是程序员定义义的，是Vue.extend生成的。
        2.我们只需要写<Car/>或<Car></Car>，Vue解析时会带我们创建Car组件的实例对象，
            即Vue带我们执行的:newVueComponent(options)。
        3.特别注意:每次调用Vue.extend，返回的都是一个全新的VueComponent!!!!
        4.关于this指向:
            (1).组件配置中:
                data函数、methods中的函数、watch中的所数、computed中的所数它们的this均是【VueComponent实例对象】
            (2).new Vue(options)配置中:data所数、methods中的系数、watch的所数computed中的函数它们的this均是【Vue实例对象】
        5.VueComponent的例对象，以后简称vc(也可称之为:组件实例对象)。
            Vue的实例对象，以后简称vm
        6.一个重要的内置关系:VueComponent.prototype.__proto__=== Vue.prototype
            这里主要是指原型上自带的属性、方法。
            如果父组件上自己定义的方法，属性是没办法进直接使用的，需要进行原型链的继承处理（如下面的name 和add方法）
        7.为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。


-->
<img src="VueComponent的理解.png" alt="图片丢失了,请联系管理员处理">
<hr>
<img src="父子组件中的自定义数据传递.png" alt="图片丢失了,请联系管理员处理">
<hr>
<div id="app">
    <my-car></my-car>
</div>
</body>
<script>
    const Car = Vue.extend({
        template: `<div><h1>{{carName}}</h1> <hr> <h2>{{addFromParent()}}</h2></div>`,
        props: ['carName','addFromParent'],
    });
    let vue = new Vue({
        el: '#app',
        template: `<div><my-car :carName="name" :addFromParent="add"></my-car></div>`,
        data:{
            name: "兰博基尼"
        },
        methods: {
            add(){
                return 1+1;
            }
        },
        components: {
            "my-car": Car
        }

    });
    console.log(Car.prototype)


</script>
</html>